<template>
    <a-config-provider :locale="zh_CN">
        <div id="app">
            <!-- 标题 登录后才显示 -->
            <div id="header" class="header" v-show="showHead">
                <!-- 名字 -->
                <div id="header-title" class="header-title" style="color:#5086ff;">
                   <font style="font-size:35px; font-weight: bolder;">{{titles}}</font>
                    </div>
                <!-- 按钮 -->
                <div id="header-menu" class="header-menu" v-on:click="showMenuDrawer">
                    <div id="header-menu-icon" class="header-menu-icon"/>
                </div>
                <!-- 右边功能框 -->
                <div class="header-tool">
                    <!-- 复选框 -->
                    <a-switch
                            id="themeSwitch"
                            v-on:change="switchTheme"
                            size="default"
                            :defaultChecked="computedTheme"
                    />
                    <!-- 闹钟 -->
                    <div class="header-clock" v-on:click="remindTap">
                        <!-- 闹钟 -->
                        <div id="header-bell" class="icon-bell"/>

                        <!-- 数字 -->
                       <!-- <div class="text-num" v-if="remindCount">{{remindCount}}</div> -->
                    </div>

                    <template v-if="account.account == '高岩社区'">
                    </template>
                    <template v-else>
                      <div style="float:left;margin-left:2em"><a-button @click="toScreen">大屏</a-button></div>
                    </template>

                    <!-- 头像 -->
                    <div class="header-icon"></div>
                    <!-- 名字 -->
                    <div id="header-name" class="header-name">{{setUserName||account.account}}</div>
                    <!-- 箭头 -->
<!--                    <div id="header-down" class="header-down"/>-->
                    <a-dropdown :trigger="['click']">
                        <a-menu slot="overlay" @click="Logout">
                            <a-menu-item key="1"><a-icon type="user-delete" style="color:#ff0000" />{{testPermission ? "" : ""}}注销登录</a-menu-item>
                        </a-menu>
                        <a-button style="margin-left: 8px"><a-icon type="down" /> </a-button>
                    </a-dropdown>
                </div>
                <!-- 天气 -->
                <div class="contain-weather">
                    <img class="icon-weather"/>
                    <span class="text-weather"></span>
                </div>
            </div>
            <!-- 内容 -->
            <div id="content">
                <router-view/>
            </div>
            <!-- drawer -->
            <a-drawer
                    width="229"
                    placement="left"
                    :wrapStyle="{height: 'calc(100% - 50px)',overflow: 'auto', marginTop: '50px'}"
                    :closable="false"
                    @close="closeMenuDrawer"
                    :visible="visible"
            >
                <!-- 菜单项 -->
                <template v-if="isLoadingPermission">
                    <a-spin
                        style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);"
                        tip="加载路由表中..." :spinning="isLoadingPermission">
                    </a-spin>
                </template>
                <template v-else>
                    <div id="menuControl" v-for="menu in menus" v-bind:key="menu.name">
                        <!-- 一级 -->
                        <ul class="menu-ul">
                            <li
                                    class="menu-li menu-item"
                                    :class="selectActive(menu.tag)"
                                    v-on:click="selectMenu(menu)"
                            >
                                <div class="icon-menu" :id="menu.icon"/>
                                <span class="text-menu">{{menu.name}}</span>
                                <div id="icon-enter-0" style="margin-left: 27px;" v-if="menu.items"></div>
                            </li>
                            <!-- 二级 -->
                            <ul class="menu-sub-ul" v-if="menu.items" :id="menu.name">
                                <li
                                        class="menu-sub-li menu-sub-item"
                                        :class="selectSubActive(item.tag)"
                                        v-for="item in menu.items"
                                        v-bind:key="item.name"
                                        v-on:click="selectMenu(item)"
                                >
                                    <span style="padding-left: 64px;">{{item.name}}</span>
                                </li>
                            </ul>
                        </ul>
                    </div>
                </template>
            </a-drawer>
            <!-- 弹窗 -->
            <Modal/>
            <!--弹窗新增/编辑页面-->
            <AddPages/>
            <AddPagesPlus/>
            <AddPages/>
            <!-- 底部 -->
        </div>
    </a-config-provider>
</template>

<script>
    /* ----------- 适配 ----------- */
    import {adjustRem} from "./utils/FitUtils";
    /* ----------- 主题 ----------- */
    import Common from "./store/common.js";
    import Modal from "./components/Modal.vue";
    /* ----------------- 国际化 --------------- */
    import zh_CN from "ant-design-vue/lib/locale-provider/zh_CN";
    import moment from "moment";
    import "moment/locale/zh-cn";
    import AddPages from "./components/AddPages";
    import AddPagesPlus from "./components/AddPagesPlus";
    import Login from "./api/login";
    import { mapGetters } from 'vuex'
    import ParkApi from "./api/system/ParkApi";
     import screenfull from 'screenfull';
     import {titles} from "./api/BaseApi";
    // import { watch } from 'fs';

    adjustRem(1280, 1280);

    window.onresize = adjustReSize;

    window.onload = () => {
        Common.switchTheme();
        adjustReSize();
    };

    function adjustReSize() {
        // let {clientWidth, clientHeight} = document.body;
        // let {offsetWidth, offsetHeight} = document.body;
        let { clientHeight} = document.body;
        let contentHeight =
            clientHeight - document.querySelector("#header").clientHeight;
        document.querySelector("#content").style = `height: ${contentHeight}px`;
    }

    moment.locale("zh-cn");

    export default {
        name: "app",
        components: {
            AddPagesPlus,
            AddPages,
            Modal
        },

        data() {
            return {
                titles,
                visible: false,
                /* --------------- 菜单 --------------- */
                menus: [],
                zh_CN,
                account:{}, //账号
                isLoadingPermission: false,
                //全屏控制
                fullscreen: false,
            };
        },

        methods: {
            /* -------------------- 权限 --------------------- */
            initPermission() {
                this.isLoadingPermission = true;
                ParkApi.getPermissionTree()
                    .then((data) => {
                        this.isLoadingPermission = false;
                        let menus = data.data;
                        if(!menus || menus.length == 0 || !menus[0].items)  {
                            this.menus = [];
                        } else {
                            this.menus = menus[0].items;
                        }
                    })
                    .catch(err => {
                        this.isLoadingPermission = false;
                        this.$message.error("路由列表拉取失败:"+err);
                    })
            },

            /* -------------------- 提醒 -------------------- */
            setRemind() {
                // this.remindCount = count;
            },

            remindTap() {
                // alert("提醒点击");
            },

            /* -------------------- 抽屉 -------------------- */
            showMenuDrawer() {
                if (this.visible) {
                    this.visible = false;
                } else {
                    this.visible = true;
                }
            },

            closeMenuDrawer() {
                this.visible = false;
            },

            /* -------------------- 主题 -------------------- */
            switchTheme(e) {
                Common.switchTheme(e ? Common.THEME.DARK : Common.THEME.LIGHT);
            },

            /* -------------------- 菜单 -------------------- */
            selectMenu(menu) {
                if (menu.items && menu.items.length > 0) {
                    $(`#${menu.name}`).slideToggle();
                } else {
                    this.$router.push({path: menu.tag, query: {}});
                    this.closeMenuDrawer();
                }
            },

            //注销登录
            Logout(){
                let _this = this;
                _this.account.account = localStorage.getItem('account');
                Login.logout(_this.account).then((data)=>{
                    if(data.code === 2000){
                        _this.$message.success("已成功退出登录");
                        this.$store.dispatch('clearloadPermission');
                        localStorage.clear('userinfo')
                        // localStorage.clear('account')
                        _this.$router.push('/login');
                        this.menus = [];    // 清空
                    }
                }).catch(error=>{
                   console.log(error)
                })
            },

            //加载天气查询插件
            getLiveWeather(){
                let _this = this;
                AMap.plugin('AMap.Weather', function() {
                    //创建天气查询实例
                    let weather = new AMap.Weather();
                    //执行实时天气信息查询
                    weather.getLive('深圳市', function(err, data) {
                        if(data){
                            _this.setWeather(
                                "",
                                data.weather
                            )
                        }
                    });
                });
            },

            /* -------------------- 天气 -------------------- */
            setWeather(icon, text) {
                document.querySelector(".contain-weather .icon-weather").src = icon;
                document.querySelector(".contain-weather .text-weather").innerHTML = text;
            },

            getUserName(){
                this.account.account = localStorage.getItem('account');
            },
            //跳转大屏
            toScreen(){
                this.visible = false;
                this.$router.push('/Screen');
                if (!screenfull.isEnabled) {
                    this.$message({
                    message: 'you browser can not work',
                    type: 'warning'
                    })
                    return false
                }
                screenfull.toggle();
            }
        },

        mounted() {
            // this.setRemind(10);
            //加载天气查询插件
            this.getLiveWeather();
            this.getUserName()
            if(localStorage.getItem('account')) {
                this.initPermission();
            }
        },

        computed: {
            ...mapGetters(['showHead','setUserName']),
            computedTheme() {
                return Common.getTheme() != Common.THEME.LIGHT;
            },

            selectActive() {
                return function (tag) {
                    return this.$route.path.indexOf(tag) != -1 ? "menu-item-select" : "";
                };
            },

            selectSubActive() {
                return function (tag) {
                    return this.$route.path.indexOf(tag) != -1
                        ? "menu-sub-item-select"
                        : "";
                };
            },

            testPermission() {
                if(this.$store.state.loadPermission) {
                    this.initPermission();
                }
                return this.$store.state.loadPermission;
            },
        },
    };
</script>

<style>
    #app {width:100%;height:100%;min-width:1000px;}
    #content {display:block;position:relative;width:100%;}
    /* 标题 */
    .header {position:relative;width:100%;height:50px;display:flex;align-items:center;justify-content:space-between;}
    .header .header-menu {width: 96px;height: 100%;display: flex;align-items: center;justify-content: center;}
    .header .header-menu .header-menu-icon {width: 39px;height: 35px;}
    .header .header-title {font-size: 19px; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); }
    /* box-title-tool */
    .header .header-tool {display: flex;align-items: center;margin-right: 32px;}
    .header-tool .header-clock {position: relative;width: 34px;height: 31px;margin-left: 65px;cursor: pointer;}
    .header-clock .icon-bell {width: 26px;height: 31px;}
    .header-clock .text-num {position: absolute;top: 0;right: 0;padding-left: 5px;padding-right: 5px;height: 18px;background: #ff4747;border-radius: 9px;color: #ffffff;font-size: 14px;display: flex;align-items: center;justify-content: center;}
    /* info */
    .header .header-icon {width: 43px;height: 43px;background-image:url('./assets/portrait.png');margin-left: 74px;border-radius: 50%;}
    .header .header-name {line-height: 40px;margin-left: 8px;}
    .header .header-down {width: 12px;height: 9px;margin-left: 12px;}
    /* drawer */
    .ant-drawer-body {padding: 0;}
    /* 天气 */
    .contain-weather {position: absolute;left: 192px;height: 100%;display: flex;align-items: center;}
    .contain-weather .icon-weather {width: 40px;height: 40px;}
    .contain-weather .text-weather {margin-left: 14px;font-size: 16px;}
    /* --------------- 菜单 ---------------- */
    #menuControl {width: 100%;
    }
    /* 一级 默认*/
    #menuControl .menu-ul {width: 100%;margin-bottom: 0;cursor: pointer;
     }
    #menuControl .menu-li {padding-left: 43px;height: 57px;display: flex;align-items: center;
		background-image:linear-gradient(45deg,#bcdbd7,rgb(255, 255, 255));
     }
    #menuControl .menu-li .text-menu {margin-left: 15px;
    }
    /* 二级 */
    #menuControl .menu-sub-ul {display: none;margin-bottom: 0;
    }
    #menuControl .menu-sub-li {
        height: 50px;
        display: flex;
        align-items: center;
         }
    /*注销*/
    .theme-light .ant-dropdown-menu{overflow-y:auto}
    .theme-light .ant-dropdown-menu-item:hover{background:#e6f7ff;}
</style>
